<template>
  <div class="index">

    <div class="center">
      <left></left>
      <div class="right">
        <top></top>
        <div class="hei10"></div>
        <div class="dizhiku">
          <div @click="$router.back()" style="margin-bottom: 20px; cursor: pointer;"><i class="el-icon-back" style="color: rgb(57, 91, 255); margin-right: 10px;"></i>地址库匹配规则管理</div>
          <div
            style="margin-bottom: 20px; font-size: 14px; background: rgb(218, 231, 245); color: rgb(100, 112, 118); padding: 12px 20px;">
            各接口渠道地址库编码存在不一致的问题，该功能会把因地址问题导致提单失败，人工修改后成功提交的记录识别为自动处理规则，再次遇到同样的地址问题会按照该次规则自动修改提单，避免人工重复处理，系统会自动记录规则，
            您也可以在“自动生产订单”——“修改订单信息”处修改完成后点击“保存本次修改至默认规则”手动添加规则。</div>

          <div class="kflex">
            <el-select v-model="search.upstream_account" filterable clearable placeholder="请选择选择接口渠道">
            	<el-option :label="item.c_name" :value="item.y_name" v-for="item in list" :key="item.id"></el-option>
            </el-select>
            <el-button type="primary" round @click="getlist" style="margin: 0 20px;">搜索</el-button>

            <el-button type="primary" round @click="add" style="margin: 0 20px;">添加规则</el-button>
          </div>

          <el-table :data="tableData" border style="width: 100%; margin-top: 20px;" v-loading="loading">
            <el-table-column prop="c_name" label="渠道名称"></el-table-column>
<!--            <el-table-column prop="address" label="要替换的地址"></el-table-column>
            <el-table-column prop="sub_address" label="替换后的地址"></el-table-column> -->
            <el-table-column  label="问题地址">
              <template slot-scope="scope">
                <div v-if="scope.row.type == 0">
                  {{scope.row.address_province}}
                  {{scope.row.address_city}}
                  {{scope.row.address_district}}
                </div>
                <div v-if="scope.row.type == 1">
                  {{scope.row.address}}
                </div>
              </template>
            </el-table-column>
            <el-table-column  label="自动修改地址">
              <template slot-scope="scope">
                <div v-if="scope.row.type == 0">
                  {{scope.row.sub_province}}
                  {{scope.row.sub_city}}
                  {{scope.row.sub_district}}
                </div>
                <div v-if="scope.row.type == 1">
                  {{scope.row.sub_address}}
                </div>

              </template>
            </el-table-column>

            <el-table-column  label="操作">
              <template slot-scope="scope">
                <el-button size="mini" type="text" @click="bianji(scope.row)">编辑</el-button>
                <el-button size="mini" type="text" @click="shanchu(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>

          <div style="text-align:right; margin-top:20px">
            <el-pagination background layout="total,prev, pager, next" :current-page="search.page" @current-change="fanye"
              :page-size="search.pagesize" :total="total"></el-pagination>
          </div>

          <el-dialog  :title="title" center  :visible.sync="log" width="700px" :close-on-click-modal="false" :close-on-press-escape="false" :show-close="true">
                <div class="kflexc" v-if="!shuju.id" style="margin-bottom: 20px;">
                  <div style="width: 120px; margin-right: 20px; text-align: right;">接口渠道：</div>
                  <div>
                    <div class="kflex">
                      <el-select v-model="shuju.channel_id" style="width: 300px;" filterable clearable placeholder="请选择选择接口渠道">
                      	<el-option :label="item.user_defined_name?item.user_defined_name :item.c_name " :value="item.channel_id" v-for="item in list" :key="item.id"></el-option>
                      </el-select>
                    </div>
                  </div>
                </div>
                <div class="kflexc" v-if="!shuju.id" style="margin-bottom: 20px;">
                  <div style="width: 120px; margin-right: 20px; text-align: right;">&nbsp;</div>
                  <div>
                    <div class="kflex">
                      <el-radio v-model="shuju.type" :label="0">省市区</el-radio>
                      <el-radio v-model="shuju.type" :label="1">详细地址</el-radio>
                    </div>
                  </div>
                </div>

                <div class="kflexc" v-if="shuju.type == 1" style="margin-bottom: 20px;">
                  <div style="width: 120px; margin-right: 20px; text-align: right;">原地址包含：</div>
                  <div><el-input style="width: 300px;" type="text" placeholder="请输入要替换的地址" v-model="shuju.address"></el-input></div>
                </div>
                <div class="kflexc" v-if="shuju.type == 1" style="margin-bottom: 20px;">
                  <div style="width: 120px; margin-right: 20px; text-align: right;">替换为：</div>
                  <div><el-input style="width: 300px;" type="text" placeholder="请输入替换后的地址" v-model="shuju.sub_address"></el-input></div>
                </div>
                <div class="kflexc" v-if="shuju.type == 1" style="margin-bottom: 20px;">
                  <div style="width: 120px; margin-right: 20px; text-align: right;">&nbsp;</div>
                  <div>如不填写替换内容，则默认为删除</div>
                </div>


                <div class="kflexc" v-if="shuju.type == 0" style="margin-bottom: 20px;">
                  <div style="width: 120px; margin-right: 20px; text-align: right;">原地址：</div>
                  <div><el-input style="width: 150px; margin-right: 10px; " type="text" placeholder="省" v-model="shuju.address_province"></el-input></div>
                  <div><el-input style="width: 150px; margin-right: 10px; " type="text" placeholder="市" v-model="shuju.address_city"></el-input></div>
                  <div><el-input style="width: 150px; margin-right: 10px; " type="text" placeholder="区" v-model="shuju.address_district"></el-input></div>
                </div>
                <div class="kflexc" v-if="shuju.type == 0" style="margin-bottom: 20px;">
                  <div style="width: 120px; margin-right: 20px; text-align: right;">现地址：</div>
                  <div><el-input style="width: 150px; margin-right: 10px; " type="text" placeholder="省" v-model="shuju.sub_province"></el-input></div>
                  <div><el-input style="width: 150px; margin-right: 10px; " type="text" placeholder="市" v-model="shuju.sub_city"></el-input></div>
                  <div><el-input style="width: 150px; margin-right: 10px; " type="text" placeholder="区" v-model="shuju.sub_district"></el-input></div>
                </div>


                <span slot="footer" class="dialog-footer">
                  <el-button type="info" round @click="log = false">取消</el-button>
                  <el-button type="primary" round @click="bianjigo" v-if="shuju.id">确定</el-button>

                  <el-button type="primary" round @click="bianjigo2" v-if="!shuju.id">确定</el-button>
                </span>
          </el-dialog>
      </div>
     </div>
     </div>
   </div>
</template>


<script>
  import all from '@/assets/all.js'
  import axios from "axios";
  import top from '@/components/top.vue'
  import left from '@/components/left.vue'
  import foot from '@/components/foot.vue'
  export default {
    components: {
      "left": left,
      "top": top,
      "foot": foot
    },
    name: 'dizhiku',
    data() {
      return {
        log:false,
        tableData: [],
        total: 0,
        search: {
          pagesize: 20,
          page: 1,
          upstream_account:""
        },
        list:"",
        shuju:{
          order_id:"",
          channel_id:"",

          upstream_account:"",
          address_province:"",
          address_city:"",
          address_district:"",
          sub_province:"",
          sub_city:"",
          sub_district:"",

          type:0,
          address:"",
          sub_address:""
        },
        title:""
      }
    },
    created() {
      this.getlist()
      this.getlist2()
    },
    methods: {
      add:function(){
        this.title = '添加规则'
        this.shuju = {
          id:"",
          upstream_account:"",
          address_province:"",
          address_city:"",
          address_district:"",
          sub_province:"",
          sub_city:"",
          sub_district:"",
          type:0,
          address:"",
          sub_address:""
        }
        this.log = true
      },
      bianji:function(item){
        this.title = '编辑规则'
        this.shuju = JSON.parse(JSON.stringify(item))
        this.log = true
      },
      bianjigo:function(){
        axios.post('/api/plan-market/order/address/update', this.shuju)
          .then(response => {
            if (response.data.msg.code == 0) {
              this.getlist()
              this.log = false
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
        this.log = false
      },
      bianjigo2:function(){
        axios.post('/api/plan-market/order/address/add', this.shuju)
          .then(response => {
            if (response.data.msg.code == 0) {
              this.getlist()
              this.log = false
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
        this.log = false
      },
      shanchu: function(item) {
        this.$confirm('确认删除此黑名单吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          axios.post('/api/plan-market/order/address/del', {
              id: item.id
            })
            .then(response => {
              if (response.data.msg.code == 0) {
                this.getlist()
              } else {
                this.$message.error(response.data.msg.info);
              }
            })
        })
      },
      //翻页
      fanye: function(page) {
        this.loading = true
        this.search.page = page
        this.getlist()
      },
      getlist2: function() {
        axios.get('/api/plan-market/upstream/channel/config/list')
          .then(response => {
            if (response.data.msg.code == 0) {
              this.list = response.data.data
              console.log('dizhi')
              console.log(response.data.data)
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      },
      getlist: function() {
        axios.get('/api/plan-market/order/address/get', {
            params: this.search
          })
          .then(response => {
            if (response.data.msg.code == 0) {
              this.tableData = response.data.data.data
              this.total = response.data.data.total
              this.loading = false
            } else {
              this.$message.error(response.data.msg.info);
              this.loading = false
            }
          })
      },
    }
  }
</script>

<style lang="scss" scoped>
  .dizhiku {
    padding: 20px;

    /deep/ .el-input__inner{ background: rgb(243, 245, 248); border-color: rgb(243, 245, 248);}
    /deep/ .el-button--primary {
      color: #FFF;
      background-color: #2974FF;
      border-color: #2974FF;
    }



    /deep/ #drop .el-button--primary {
      background-color: #2974FF;
      border: 1px #2974FF solid;
      margin-left: 20px;
      border-radius: 20px;
    }

    // /deep/ .el-button--primary {
    //   background: #EEF7FF;
    //   border: 1px #EEF7FF solid;
    // }

    .flex {
      display: flex;
      align-items: center;
      margin-bottom: 20px;

      .f1 {
        width: 120px;
        text-align: right;
      }
    }


  }
</style>
